<template>
  <div>
    <h1 v-color="color">hello vue</h1>
    <h2 v-fcolor>使用全局自定义这里设置颜色</h2>
    <button @click="changeColorFn">点我修改字体颜色</button>
  </div>
</template>
// 自定义指令的update函数的使用
<script>
export default {
  data(){
    return {
      color: 'green'
    }
  },
  methods: {
    changeColorFn(){
      this.color = "red";
    }
  },
  directives: {
    color: {
      inserted(el,binding){
        // 自定义指令的传值和接收值
        // el：就是使用该指令的标签
        // 自定义指令传值：在使用指令的时候传递即可，eg: v-color="'green'"
        // 如何接收指令传递过来的值？答：可以通过inserted函数的第二参数接收，binding.value来接收
        // console.log(13,el);
        // inserted 函数只会在标签插入到DOM中的时候渲染一次，数据发生改变不会重新出发inserted函数。
        console.log(15,binding);
        el.style.color = binding.value;
      },
      update(el,binding){
        // update 函数只有数据更新的时候才会触发
        console.log(34,"update触发了")
         el.style.color = binding.value;
      }
    }
  }
}
</script>

<style>

</style>